<template>
	<view v-if="item" class="index-container" style="overflow-x: hidden;">
		<view class="btns display-flex-column" @click.stop="handleBtn" :style="{ right: right + 'rpx' }">
			<img :src="img" v-for="(img, index) in imgs" :key="index" alt="" class="img-btn" @click="handleItem(index)" />
		</view>
		<view id="share">
			<!-- 
			<div style="color: #FFFFFF;height:54px;">
			分享内容区域 
			点击查看您的专属测肤报告，测肤时间：{{ time }}<br />测肤结果：{{ score }}分 {{item.skinType.skinTypeName}}
			{{item.wrinkle.foreheadWrinkle}}
		    </div>
			-->
		<view v-if="showHead" style="color: #FFFFFF;height:54px;"></view>
		<my-head v-if="showHead" :backFlag="backFlag" bgc="transparn" :rightText="(showRetry ? '再测一次':'')" @click="handleReTry" Data-btnname="再测一次">
			<view class="text">肤质检测报告</view>
		</my-head>
		<view v-else style="background-color:#FFF7F7;width:100%;text-align: center;height:54px;line-height:54px;font-weight: bold;font-size: 16px;">
			肤质检测报告
		</view>
		
		<!-- <view v-if="showShare" Data-btnname="分享"
			style="position:fixed;top:0px;bottom:0;left:0;right: 0;background-color: #000000;opacity:0.6;z-index:200;">
			<view style="text-align: right;margin:5px 15px 0px 0px;">
				<image src="../../static/share-jiantou.png" style="width:50px;" mode="widthFix"></image>
			</view>
			<view style="text-align: center;color: #FFFFFF;padding:10px 0px;">点击右上角图标分享测肤报告给好友吧</view>
			<view @click="showShare=false" Data-btnname="分享"
				style="border: 1px dashed #FFFFFF;height:32px;line-height:32px;color: #FFFFFF;width:100px;border-radius:32px;margin:auto;text-align: center;">
				我知道了
			</view>
		</view> -->

		<view class="contain-img">
			<view class="bg-img" style="height:300px;position: relative;
				top: 0;
				right: 0;
				left: 0;">
			<view class="time">{{ time }}</view>
			<view class="type-standard display-flex-center" :style="{opacity: standard == '' ? 0 : 1}"
				v-if="standard!=null">{{ standard}}</view>
			<view class="weui-flex">
				<view class="weui-flex__item" style="position: relative;">
					<!-- 	<view class="tag" style="position: absolute;right: -40px;">
						{{ item.minusSubItems[0].entryNmae }}12
						<text
							v-if="item.minusSubItems[0].scoreValue>0">-{{item.minusSubItems[0].scoreValue}}</text>
					</view> -->
					<view class="tag" style="position: absolute;right: -30px;width: 100rpx;height: 100rpx;font-size: 28rpx;">
						润
						<!-- <text
							v-if="item.minusSubItems[0].scoreValue>0">-{{item.minusSubItems[0].scoreValue}}</text> -->
					</view>
					<view class="tag" style="position: absolute;right: -10px;top:60px;width: 140rpx;height: 140rpx;"
						v-if="item.totalScore.color>=0">
                        <text style="position: absolute;margin-top: -5rpx;margin-left: 6rpx;font-size: 28rpx;">色</text>
						<text style="position: relative;top: 25rpx;">-{{item.totalScore.color}}</text>   
					</view>
					<view v-if="item.totalScore.qiAndBlood>=0" class="tag"
						style="position: absolute;right: -20px;top:125px;width: 170rpx;height: 170rpx;">
						<view class="display-flex-column">
							<text style="position: absolute;margin-top: -5rpx;margin-left: 6rpx;font-size: 28rpx;">气 色</text>
							<text style="position: relative;top: 28rpx;">-{{item.totalScore.qiAndBlood}}</text>
						</view>
					</view>
				</view>
				<view class="avatar-bg relative">
					<image v-if="avatar!=''" :src="avatar" style="width:120px;height:120px;border-radius:50%;"
						@click="preview(item.imgUrl)"></image>
					<!-- <view v-if="avatar!=''" :style="{'background-image': `url(${avatar})`}"  class="zoomImage" ></view> -->
				</view>
				<view class="weui-flex__item" style="position: relative;">
					<view class="tag" style="position: absolute;left: -30px;top:20px;width: 140rpx;height: 140rpx;"
						v-if="item.totalScore.jersey>=0">
                         <text style="position: absolute;margin-top: -5rpx;margin-left: 6rpx;font-size: 28rpx;">泽</text>
						<text style="position: relative;top: 25rpx;">-{{item.totalScore.jersey}}</text>
					</view>
					<view class="tag" style="position: absolute;left: -30px;top:100px;width: 200rpx;height: 200rpx;"
						v-if="item.totalScore.mass>=0">
                         <text style="position: absolute;margin-top:-5rpx;margin-left: 6rpx;font-size: 28rpx;">质</text>
						<text style="position: relative;top: 28rpx;">-{{item.totalScore.mass}}</text>
					</view>
				</view>
			</view>

			<view class="score">
				{{ score }}
				<text style="font-size:12px;">分</text>
			</view>
			<!--分数-->
			<view style="text-align: center;line-height:1;">
				<image src="../../static/fsty@2x.png" style="height: 12px;width: 120px;" />
			</view>

			<view class="type-over">
				您的分数超过全国
				<text class="over" style="font-weight: bold;">{{'&nbsp;'+percentage}}</text>%&nbsp;的同龄人
			</view>
			</view>
			<view class="text-container">
				<test-item v-for="(item1, index1) in list" :key="index1" :item="item1" :obj="obj" />
			</view>
			<view class="text-container" style="background-color: #FFF8FA;">
				<view class="container-proposal">
					<view class="display-flex" style="padding-bottom:10px;">
						<img src="../../static/hljytitle@2x.png" class="title" alt="" />
						<view class="text">护理建议</view>
					</view>
					<test-item2 :active="active" />
				</view>
			</view>

		</view>
		<view class="tips display-flex-center" style="padding-top: 20rpx;">{{ tips }}</view>
		<view class="tips display-flex-center" style="height: auto;padding-bottom:5px;">北京旷视科技有限公司提供技术支持</view>
	</view>
		<view class="share-container" v-if="imageSrc!=''">
			<view style="line-height: 0">
				<img :src="imageSrc" width="100%" class="transform-img" />
			</view>
			<!-- <view class="share-footer display-flex-center">
				<view>长按上方图片保存至手机</view>
			</view> -->
		</view>
		
		<!-- <view class="share-container" v-if="imageSrc">
			<view style="line-height: 0">
				<img :src="imageSrc" width="100%" class="transform-img" />
			</view>
			<view class="share-footer display-flex-center">
				<view>长按图片保存至手机</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import TestItem from "./indexCompnents/test-item.vue";
	import TestItem2 from "./indexCompnents/test2-item.vue";
	import htmlToCavas from "@/components/dyw-html2image/html2image";
	var upperScrollTop = 0;

	export default {
		components: {
			TestItem,
			TestItem2
		},
		data() {
			return {
				showHead:true,
				backFlag: false,
				showShare: false,
				item: undefined,
				obj: {
					resImageUrls: [],
					skinTypeName: "",
					blackheadPores: [],
					3: [],
					4: [],
					5: [],
					points: { //显示 色素沉着  黑头毛孔对应展示数据
						2: [],
						3: []
					},
					texts: {
						2: {
							name: "肤色",
							list: ["透白", "白皙", "自然", "小麦", "黝黑"],
							rate: 25,
						},
						3: {
							name: "黑头",
							list: ["无", "轻度", "中度", "重度"],
							rate: 33,
						},
					},
					title:{
						1:{
							name:"润",
							url: require("../../static/run@2x.png"),
						},
						2:{
							name:"色",
							url: require("../../static/se@2x.png"),
						},
						3:{
							name:"泽",
							url: require("../../static/ze@2x.png"),
						},
						4:{
							name:"质",
							url: require("../../static/zhi@2x.png"),
						},
						5:{
							name:"气血",
							url: require("../../static/qx@2x.png"),
						}
					},
					dous: {
						3: [{
								name: "闭口",
								url: require("../../static/dou3.png"),
								count: 0,
								color: '#ff6875'
							},
							{
								name: "无毛孔粗大",
								url: require("../../static/maokong@2x.png"),
								count: 0,
								color: '#ff6875'
							},
						],
						2: [{
								name: "色斑",
								url: require("../../static/se1.png"),
								count: 0,
								color: '#ff6875'
							},
							{
								name: "痘印",
								url: require("../../static/dou1.png"),
								count: 0,
								color: '#ff6875'
							},
						],
					},
				},
				data: "",
				flag: false,
				imageSrc: "",
				right: 0,
				imgs: [require("../../static/load.png")],
				tips: "由于拍摄光线、角度等不稳定因素影响，报告结果仅供参考",
				list: [{
						type: "1",
						level: null,
						name: "肤质",
						mode: '润',
						content: `混合性肤质，脸颊和嘴唇部位比较干燥，但额头和皇子却经常油脂泛滥，同时下额、鼻翼处会不时起一些闭合性粉刺，鼻端粗大的毛孔还会延续到脸颊中间。
混合性肤质，T区偏油，面颊偏干，应加强皮肤补水，调节水油平衡。爱出油的你需要注意调理肌肤的水油平衡，日常可以选用清爽型不油腻的护肤水来达到补水控油的效果。使用一些成分温和简单不刺激的护肤水，能帮你在补水的同时避免过敏风险。
              
`,
					},
					{
						type: "2",
						level: null,
						name: "色素沉着",
						mode: '色',
						content: `自然的肤色给人天然健康的感觉~平时注意给肌肤补充水分，多摄入蔬菜水果，保持心情愉悦，肌肤会越来越健康哦~
检测出面部色斑，面部色斑是由于皮肤黑色素的增加而形成的一种常见面部呈褐色或黑色素沉着性、损容性的皮肤疾病。可选用有美白淡斑功效的产品来减轻斑点。

`,
					},
					{
						type: "3",
						level: null,
						name: "黑头毛孔",
						mode: '泽',
						content: `有轻度黑头，不用过分担心，正确的护理方法即可减轻或消除黑头哦。黑头形成原因：皮肤表面产生的油分会使毛孔扩大，多余的油脂会积聚在表面，导致皮肤细胞脱落，在毛孔粗大处产生黑头。可选用有溶解黑头功效的产品以及洁面仪器来进行皮肤清洁护理。


前额无毛孔粗大，皮肤细腻，日常需注意皮肤清洁和保湿。

`,
					}
					//					,
					// 					{
					// 						type: "4",
					// 						level: null,
					// 						name: "痘痘闭口",
					// 						content: `检测出面部有12个痘痘。需要注意皮肤的清洁处理，注意不要用手挤压，容易造成发炎感染。日常皮肤护理建议选用天然温和成分的护肤品，少皮肤刺激，也可选用一些专业的祛痘产品。
					// 检测出面部有3个闭口。毛孔中的油脂和异物堆积造成闭口的出现，需要注意做好日常的皮肤清洁，可以使用含有水杨酸的温和去角质产品。

					// `,
					// 					}
					,

					{
						type: "4",
						level: null,
						name: "眼部状态",
						mode: '气血',
						content: `无眼部细纹，日常应注意补充皮肤水分和防晒，选用有保湿滋润功效的眼部护理产品，来进行一定的预防。
无鱼尾纹，日常应注意补充皮肤水分和防晒，选用有保湿滋润功效的眼部护理产品，来进行一定的预防。
存在色素型黑眼圈。日常护理应做好防晒，可选用眼霜和眼膜来进行眼部保养。
无眼袋，应保证充足睡眠和良好的生活习惯，注意眼部护理，避免出现眼袋哦。
`,
					},
					{
						type: "5",
						level: null,
						name: "衰老问题",
						mode: '质',
						content: `无眉间纹，日常应注意补充皮肤水分和防晒，选用有保湿滋润功效的眼部护理产品，来进行一定的预防。
没有检测到抬头纹，日常应注意补充皮肤水分和防晒，适当使用抗初老的护肤品来进行一定的预防。
没有法令纹，日常应注意补充皮肤水分和防晒。`,
					}
				],
				active: {
					1: [],
					2: []
				},
				// avatar: require('../../static/avatar.png'),
				avatar: "",
				time: "2021-22-11 10:11",
				score: 0,
				standard: "",
				scrollTop: '',
				id: "",
				showRetry: false,
				percentage: '' //超过百分数
			};
		},
		watch: {
			scrollTop(nv, ov) {}
		},
		onShow() {
			let _this = this;
			_this.handleSugoioLoad('报告页', 'guest-skinTestReport')
		},
		onLoad(option) {
			// console.log(this.$users.ID);
			this.backFlag = (this.$users.ID == '' ? false : true);
			this.id = option.id;
			// if (this.$common.getStorage("ShowShare") == undefined && this.$users.ID != '') {
			// 	this.$common.setStorage("ShowShare", 1);
			// 	this.showShare = true;
			// }

			var testResult = this.$common.getStorage("TestResult");
			if (testResult) {
				this.showRetry = true;
				this.$common.removeStorage("TestResult");
				//this.showResult(this.item);
			}
			this.$common.initAjax({
				url: "skin/findById?id=" + this.id,
				success: (res) => {
					if (res.code == 0) {
						this.item = {
							...res.data.aiFaceResult,
							createTime: res.data.skinRecord.createTime,
							avatar: res.data.skinRecord.imgSize,
							imgUrl: res.data.skinRecord.imgurl,
							percentage: res.data.skinRecord.percentage,
							score: res.data.skinRecord.scores
						};
						// console.log("data", this.item);
						this.showResult(this.item);
					} else {
						this.$common.alert("网络故障，刷新重试");
					}
				}
			});
			var setRight = ()=>{
				if(upperScrollTop!=this.scrollTop){
					this.right = 0;
					upperScrollTop = this.scrollTop;
				}
				setTimeout(()=>{
					setRight();
				},2000);
			};
			setRight();
		},
		mounted() {

		},
		onPageScroll(e) {
			this.right = -76;
			this.scrollTop = e.scrollTop;
		},
		methods: {
			preview(imgUrl) {
				uni.previewImage({
					indicator: "none",
					urls: [imgUrl]
				});
			},
			showResult(item) {
				const {
					createTime, //创建时间
					totalScore, //扣分项
					inspectFaceStatus, //状态
					skinType, //质肤检测结果 
					blackheadPores, //黑头毛孔
					eyeState, //眼部状态
					wrinkle, //衰老问题
					pigment, //色素沉着
					// acneShutUp, //之前的痘痘跟闭口
					avatar, //ImgSize
					// faceRectangle // 定位 暂无使用,
					percentage, //超过百分比
					score
				} = item;
				//console.log("avatar:",avatar);

				//console.log(`this.list`, this.list);
				// 描述
				this.list[0].content = skinType.describe //质肤检测结果 
				this.list[1].content = pigment.describe //色素沉着
				this.list[2].content = blackheadPores.describe //黑头毛孔
				// this.list[3].content = acneShutUp.describe
				this.list[3].content = eyeState.describe //眼部状态
				this.list[4].content = wrinkle.describe //衰老问题
				
				// console.log(this.list[3].content);


				//建议
				this.active[1] = item.whiteningAdvice;
				this.active[2] = item.agingAdvice;


                 //痘印色斑闭口数量

				let cloLent = blackheadPores.acneShutUp.closedComedones==null?0:blackheadPores.acneShutUp.closedComedones.length;
				this.obj.dous[3][0].count = cloLent;
				this.obj.dous[3][1].count = 0;  //
				this.obj.dous[3][1].name = blackheadPores.pores;
				if (cloLent > 0) this.obj.dous[3][0].color = '#994EDD';
				// if (blackheadPores.acneShutUp.closedComedones.length > 0) this.obj.dous[3][1].color = '#ff6a6a'

				this.obj.dous[2][0].count = pigment.skinSpotsCounts 
				let acnesLenth = pigment.acneShutUp.acnes==null?0:pigment.acneShutUp.acnes.length;
				this.obj.dous[2][1].count = acnesLenth;
				if (pigment.skinSpotsCounts > 0) this.obj.dous[2][0].color = '#994EDD'
				if (acnesLenth > 0) this.obj.dous[2][1].color = '#ff6a6a'
				
				

				// 测试者头像
				this.obj.avatar = this.avatar = avatar; //头像图片
				this.obj.resImageUrls[2] = this.item.pigment.resImageUrl; //第一张标记图片  色素沉着
				this.obj.resImageUrls[3] = this.item.blackheadPores.resImgUrl; //第二张标记图片  黑头毛孔
				// console.log("resImageUrls",this.obj.resImageUrls);
				// console.log("percentage",percentage);
				this.obj.percentage = this.percentage = percentage.indexOf("%")>-1?percentage.replace("%",""):percentage;

				// let {
				// 	poresCheek,
				// 	poresForehead,
				// 	poresJaw
				// } = blackheadPores
				// this.obj[3] = [poresCheek, poresForehead, poresJaw];
				let {
					crowsFeet,
					darkCircle,
					eyePouch
				} = eyeState
				this.obj[4] = [crowsFeet, darkCircle, eyePouch];
				let {
					foreheadWrinkle,
					glabellaWrinkle,
					nasolabialFold
				} = wrinkle
				this.obj[5] = [{
						name: foreheadWrinkle,
						img: (foreheadWrinkle.substring(0, 1) == '有' ? require("../../static/wen1_y.png") : require(
							"../../static/wen1.png"))
					},
					{
						name: glabellaWrinkle,
						img: (glabellaWrinkle.substring(0, 1) == '有' ? require("../../static/wen2_y.png") : require(
							"../../static/wen2.png"))
					},
					{
						name: nasolabialFold,
						img: (nasolabialFold.substring(0, 1) == '有' ? require("../../static/wen3_y.png") : require(
							"../../static/wen3.png"))
					},
				];

				//色斑和黑头级别和程度值
				this.obj.texts[2].list = pigment.skinColorList.map((item) => item.name);
				this.obj.texts[2].rate =
					(100 / (pigment.skinColorList.length - 1)) *
					pigment.skinColorList.findIndex((item) => item.isChecked);


				this.obj.texts[3].list = blackheadPores.blackheadList.map(
					(item) => item.name
				);
				this.obj.texts[3].rate =
					(100 / (blackheadPores.blackheadList.length - 1)) *
					blackheadPores.blackheadList.findIndex((item) => item.isChecked);

				// console.log(`this.obj.texts[2]`, this.obj.texts[2]);
				// console.log(`this.obj.texts[3]`, this.obj.texts[3]);
				// console.log(
				// 	`pigment.skinColorList.map(item => item.name)`,
				// 	blackheadPores.blackheadList.map((item) => item.name)
				// );
				// console.log(
				// 	`blackheadPores.blackheadList.findIndex(item => item.isChecked)`,
				// 	blackheadPores.blackheadList.findIndex((item) => item.isChecked)
				// );
				this.obj.skinTypeName = skinType.skinTypeName;
				// // 皮肤测试结果
				// this.tags = minusSubItems;
				this.standard = inspectFaceStatus;
				// this.tags.length = 5;
				 this.time = createTime;

				// // 皮肤得分
				this.score = score;
				// 100 -
				// this.tags
				// .map((item) => item.scoreValue)
				// .reduce((total, item) => item + total, 0);
				//console.log(`this.tags`, this.tags);

				// // 色斑和痘痘的位置
				// pigment.skinSpots.forEach(item => {
				// 	item.color = '#994EDD'
				// })
				// pigment.moles.forEach(item => {
				// 	item.color = '#ff6a6a'
				// })


				//获取图片信息，用来确定标注点大小
				// var multiple = parseInt((faceRectangle.width + faceRectangle.left * 2)/160);
				// var lessen = parseInt(multiple/3);
				// var multiple = 4;
				// var lessen = 1

				// let ar1 = pigment.skinSpots.concat(pigment.moles)
				// ar1.map(item => {
				// 	item.left = (item.left * 2 - parseInt(item.width) * lessen) + 'rpx'
				// 	item.top = (item.top * 2 - parseInt(item.height) * lessen) + 'rpx'
				// 	item.width = (item.width * multiple) + 'rpx'
				// 	item.height = (item.height * multiple) + 'rpx'
				// });

				// this.obj.points[2] = ar1
				// acneShutUp.acnes.forEach(item => {
				// 	item.color = '#994EDD'
				// })
				// acneShutUp.closedComedones.forEach(item => {
				// 	item.color = '#ff6a6a'
				// })
				// let ar2 = acneShutUp.closedComedones.concat(acneShutUp.acnes)

				// ar2.map(item => {
				// 	item.left = (item.left * 2 - parseInt(item.width) * lessen) + 'rpx'
				// 	item.top = (item.top * 2 - parseInt(item.height) * lessen) + 'rpx'
				// 	item.width = (item.width * multiple) + 'rpx'
				// 	item.height = (item.height * multiple) + 'rpx'
				// })
				// this.obj.points[4] = ar2;
			},
			handleReTry() {
				this.$common.back();
			},
			async handleTransLocal(url) {
				console.log(`this.$utils`, this.$utils);
				try {
					let resut = await this.$utils.getBase64(url);
					console.log(`resut`, resut);
					alert(resut);
				} catch (error) {
					alert(error);
					console.log(`error`, error);
				}
			},
			handleBtn() {
				this.right = 0;
			},
			async handleItem(index) {
				let _this = this;
				if (this.right == 0) {
					if (index == 1) {
						//this.$common.alert("点击右上角3个点进行分享");
						this.showShare = true;
					} else if (index == 0) {
						this.showHead = false;
						
						document.documentElement.scrollTop = document.body.scrollTop = 0;
						uni.showLoading({
							title: "生成中..."
						});

						setTimeout(() => {
							htmlToCavas(
									document.getElementById("share"), {
										useCORS: true,
										logging: true,
										// backgroundColor: '#982121',
										scale: 2,
										dpi: 350,
									},
									"src",
									"jpg"
								)
								.then((res) => {
									uni.hideLoading();
									_this.imageSrc = res.src;
									uni.showToast({
										title: '长按报告保存至相册',
										duration: 5000,
										icon: 'none'
									})
								})
								.catch((err) => {
									uni.hideLoading();
									console.log(`error`, error);
								});
						}, 100);
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	$color: #ff6966;

	.index-container {
		height: auto;

		.btns {
			z-index: inherit;
			transition: all 1s;
			position: fixed;
			right: -74rpx;
			bottom: 322rpx;

			.img-btn {
				width: 136rpx;
				height: 148rpx;
			}
		}

		.contain-img {
			width: 100%;
			.bg-img {
				z-index: 1;
				content: "";
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				height: 640rpx;
				background: url("../../static/head-bg@2x.png") no-repeat center center / 100% 100%;
			}
		}

		.text {
			font-weight: bolder;
			font-size: 32rpx;
		}

		.time {
			color: #c6a0a0;
			font-size: 20rpx;
			text-align: center;
    
		}

		.avatar-bg {
			padding: 15px;
			width: 120px;
			height: 120px;
			background: url(../../static/text-avatar-bg.png) no-repeat center center / contain;

			.avatar {
				border-radius: 50%;
				right: 0;
				width: 120px;
				height: 120px;
			}
		}

		.tag {

			font-family: STYuanti-SC-Regular, STYuanti-SC;
			;

			transform: translateY(-50%);
			position: absolute;
			color: $color;
			font-size: 24rpx;
			// background-color: #FFFFFF;
			// border-radius: 200rpx;

			// -webkit-box-shadow: inset 0 0 10px rgba(255, 104, 117, 0.65);
			// -moz-box-shadow: inset 0 0 10px rgba(255, 104, 117, 0.65);
			// box-shadow: inset 0 0 10px rgba(255, 104, 117, 0.65);

			// border-image: linear-gradient(143deg, rgba(255, 161, 173, 0), rgba(255, 104, 117, 0.65)) 1 1;
			// filter: blur(0.15px);

			background-image: url('../../static/bg-paopao@2x.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: -10rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.score {
			color: $color;
			font-size: 42px;
			line-height: 1;
			margin-top: 15px;
			font-weight: bold;
			text-align: center;
		}

		.type-standard {
			transform: scale(0.8);
			max-width: 50px;
			position: relative;
			height: 16px;
			margin: auto;
			color: #D0A5A3;
			font-size: 12px;
			width: auto;
			border-radius: 20px;
			padding: 0 4px;
		}


		.type-over {
			color: $color;
			font-size: 20rpx;
			text-align: center;
			position: absolute;
			bottom: 9px;
			line-height:1;
			left: 0;
			right: 0;
			margin: auto;
		}

		.over {
			font-size: 36rpx;

			// font-weight: bold;
		}

		.text-container {
			gap: 15px;
			background-color: rgba(#d8d8d8, 0.2);
			width: 100%;
			height: auto;
			// margin-top: 90rpx;

			.container-proposal {
				min-height: 200rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 40rpx;
			}

			.title {
				width: 30rpx;
				height: 30rpx;
				margin-right: 16rpx;
				color: #333;

			}
		}

		.tips {
			font-size: 10px;
			color: #999999;
			width: 100%;
			background: #FFFFFF;
			//position: sticky;
			bottom: 0;
		}
	}

	.share-container {
		width: 100%;
		height: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		position: absolute;
		z-index: 3;
		box-shadow: 10px 10px #cfcfcf;
		border-radius: 15rpx;
		background-color: #ffffff;
		// padding-top: 108rpx;

		.share-footer {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 25rpx;
			position: fixed;
			bottom: 0px;
			left: 0px;
			right: 0px;
			background-color: #FFEFEF;
			color: #FF6A6A;
		}
	}


	.zoomImage {
		width: 120px;
		height: 0;
		padding-bottom: 120px;
		overflow: hidden;
		background-position: center center;
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
		border-radius: 50%;
	}
</style>
